<template>
  <!-- 存放Html -->
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld :msg="msg" @func="show"></HelloWorld>
    <div class="nav">
      <router-link to="/">热门华语</router-link>
      <router-link to="/music">音乐播放</router-link>
      <router-link to="/login">登录</router-link>
    </div>

    <!-- 显示路由跳转的组件 -->
    <keep-alive>
      <router-view @getSongId="getSongId"></router-view>
    </keep-alive>

    <footer>
      <audio :src="songUrl" controls autoplay></audio>
    </footer>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
// import Music from './components/Music.vue'

export default {
  name: 'App',
  data() {
    return {
      msg: '欢迎来到你的 Vue.js App',
      // msg0:'父组件传数据msg0给子组件',
      songid: '',
      songUrl: ''
    }
  },
  components: {
    HelloWorld,
    // Music,
  },
  methods: {
    show(childMsg) {
      this.msg = childMsg
    },
    getSongId(songId) {
      console.log(songId)
      this.songid = songId;
      this.getSongUrl();
    },
    async getSongUrl() {
      this.$axios('/song/url', {
        method: 'get',
        params: {
          id: this.songid
        }
      }).then(({data}) => {
        if (data.code === 200) {
          this.songUrl = data.data[0]?.url;
        }
      }).catch(e => {
        alert("出错了，打开控制台查看错误！")
        console.error(e)
      })
    }

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.nav {
  margin-bottom: 40px;
}

.nav > a {
  margin-right: 30px;
}

.nav > a:last-child {
  margin-right: 0;
}

footer {
  width: 100%;
  height: 50px;
  background-color: #eee;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #ccc;
}

footer > audio {
  width: 100%;
  border: none;
}
</style>
